<template>
  <div id="pageCon">
    <headNav title="错题详情"></headNav>
    <div class="topDivCss">
      <div style="width: 5.5rem; height: 0.5rem; overflow:hidden; " >
        <span v-if="keyPointsData.subjectName" >{{keyPointsData.subjectName}}全部题目</span>
        <span v-else>知识点：{{keyPointsData.knowledgeOrChapterName}}</span>
      </div>
      <span style="color: #999999; " >{{currentPage}}/{{allPage}}</span>
    </div>
    <div class="inDivCss" >
      <span class="titleDivCss" >
        <div style="margin-bottom: 5px; margin: 0rem 0.2rem; " >
          <span style="color: orange; margin-right: .2rem; " v-if="details.questionType == 1" >(单选题)</span>
          <span style="color: orange; margin-right: .2rem; " v-if="details.questionType == 2" >(多选题)</span>
          <span style="color: orange; margin-right: .2rem; " v-if="details.questionType == 3" >(判断题)</span>
        </div>
        <!-- 本地题库—————————————————————————————————————————————————————————————————— -->
        <div style="margin: 0rem 0.2rem;" v-if="details.questionSourceType == 1" v-html="details.title" ></div>
        <!-- 平台题库—————————————————————————————————————————————————————————————————— -->
        <div style="margin: 0rem 0.2rem;" v-if="details.questionSourceType == 2" v-html="htmlDecode(details.questionContent)" ></div>
      </span>
      <checklist disabled v-if="details.questionSourceType == 1" :options="commonList" v-model="radioValue"  ></checklist>
     <!-- <div class="buttonDivCss" >
        <button type="default" class="buttonCss" >提交</button>
      </div> -->
      <div class="titleAnswerCss" >
        <div class="answerCss" style="border-right: 1px solid #c9c9c9;" >
          <span>正确答案</span>
          <div style="display: flex;">
            <span style="color: #06ca8c; margin-right: 5px;" v-for="(val, index) in this.details.rightOptions" :key="index" >{{optionFiltering(val)}}</span>
          </div>
        </div>
        <div class="answerCss" >
          <span>我的答案</span>
          <div>
            <span style="color: #ff3000; margin-right: 5px; " v-for="(val, index) in this.details.answerOptions" :key="index" >{{optionFiltering(val)}}</span>
          </div>
        </div>
      </div>
      <div class="buttonDivCss" >
        <button type="value" class="buttonCss buttonCss-2" @click="lastQuestionClick" v-if="currentPage > 1" >上一题</button>
        <button type="value" class="buttonCss" @click="nextQuestionClick" v-if="allPage != currentPage" >下一题</button>
      </div>
      <div class="analysisDivCss" >
        <span>错题时间：{{this.details.creationTime}}</span>
        <button type="default" class="buttonAnalysisCss" @click="viewResolutionClick" >查看解析 ∨</button>
      </div>
      <!-- 本地题库—————————————————————————————————————————————————————————————————— -->
      <span v-if="analysisHide == true && details.questionSourceType == 1" style="font-size: 0.28rem;" v-html="details.summary" ></span>
      <!-- 平台题库—————————————————————————————————————————————————————————————————— -->
      <span v-if="analysisHide == true && details.questionSourceType == 2" class="spanCss" style="font-size: 0.28rem;" v-html="htmlDecode(details.questionAnalysis)" ></span>
      <span v-if="analysisHide == true && details.questionSourceType == 2" class="spanCss" style="font-size: 0.28rem;" v-html="htmlDecode(details.questionAnalysisT)" ></span>
    </div>

    <div class="bottomDivCss" >
      <div class="bottomDivCss-2" @click="show4 = true" >
        <img src="@/assets/img/yichu.png" class="bottomImg" >
        <div>
          <span>移除错题本</span>
        </div>
      </div>

      <div>
        <div class="bottomDivCss-2" style="color: #128fef; " @click="show3 = true" >
          <img src="@/assets/img/huojian.png" class="bottomImg" >
          <div>
            <span>举一反三</span>
          </div>
        </div>
      </div>
    </div>
    <actionsheet v-model="show3" :menus="menus3" @on-click-menu="cancelClick" show-cancel></actionsheet>
    <actionsheet v-model="show4" :menus="menus4" @on-click-menu="removeClick" show-cancel></actionsheet>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { Checklist, Actionsheet  } from 'vux'
export default {
  components: {
    headNav,
    Checklist,
    Actionsheet
  },
  data () {
    return {
      allPage: 0, // 总页数
      currentPage: 1, // 当前页
      details: '',  // 存放取到的单题错题详情
      show3: false,  // 控制举一反三弹窗
      show4: false,  // 控制移除试题弹窗
      menus3: {  // 控制举一反三弹窗内容
        'title.noop':'举一反三<br/><span style="color:#666;font-size:12px;">将向您推送跟本题具有相同知识点的试题</span>',
        delete: '<span style="color:red">确定</span>'
      },
      menus4: {  // 控制移除试题弹窗内容
        'title.noop':'移除试题<br/><span style="color:#666;font-size:12px;">是否确定移除该试题？</span>',
        delete: '<span style="color:red">确定</span>'
      },
      analysisHide: false,  // 控制错题解析消失出现
      radioValue: ["1"],
      commonList: []
    }
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      keyPointsData: state => state.wrongTopic.keyPointsData,
      wrongTopicTypeData: state => state.wrongTopic.wrongTopicTypeData,
      selectSubjectData: state => state.wrongTopic.selectSubjectData
    })
  },
  mounted () {
    console.log(this.keyPointsData)
    console.log(this.wrongTopicTypeData)
    this.titleDetails(this.wrongTopicTypeData, this.keyPointsData.knowledgeOrChapterId, this.selectSubjectData.subjectId, this.currentPage)
  },
  methods: {
    ...mapActions({
       subjectKnowledgeApi: 'wrongTopic/subjectKnowledgeApi',
       removeApi: 'wrongTopic/removeApi',
       getIdiomApi: 'wrongTopic/getIdiomApi'
     }),
     ...mapMutations({
       controlAllSubjectArr: 'wrongTopic/controlAllSubjectArr'
     }),
     // 上一题按钮触发
     lastQuestionClick () {
       this.currentPage = this.currentPage - 1
       this.titleDetails(this.wrongTopicTypeData, this.keyPointsData.knowledgeOrChapterId, this.selectSubjectData.subjectId, this.currentPage)
     },
     // 下一题按钮触发
     nextQuestionClick () {
       this.currentPage = this.currentPage + 1
       this.titleDetails(this.wrongTopicTypeData, this.keyPointsData.knowledgeOrChapterId, this.selectSubjectData.subjectId, this.currentPage)
     },
    // 查看解析按钮事件
    viewResolutionClick () {
      this.analysisHide == true ? this.analysisHide = false : this.analysisHide = true,
      document.getElementById('pageCon').scroll({ top: 1000000, left: 0, behavior: 'smooth' })
      if (this.details.summary == null && this.details.questionSourceType == 1) {
        this.$vux.toast.text('该题暂无题目解析', 'middle')
        return
      }
      if (this.details.questionAnalysis == null && this.details.questionAnalysisT == null && this.details.questionSourceType == 2) {
        this.$vux.toast.text('该题暂无题目解析', 'middle')
        return
      }
    },
    // 举一反三点击触发
    // '2dd7fe356b594f73838655422382199f'
    // this.studentId
    cancelClick (key) {
      if ( key == "delete" ) {
        let parame = {
          StudentId: this.studentId,
          SubjectId: this.selectSubjectData.subjectId,
          QuestionId: this.details.questionId
        }
        this.getIdiomApi(parame).then(res => {
          this.controlAllSubjectArr(res)
          this.$router.push('/wrongTopic/jumpPage')
        }).catch(err => {
          this.$vux.toast.text(err, 'middle')
        })
      }else {
        this.$vux.toast.text('已取消操作', 'middle')
      }
    },
    // 移除试题点击触发
    removeClick (key) {
      if ( key == "delete" ) {
        let parame = {
          questionId: this.details.questionId,
          studentId: this.studentId
        }
        this.removeApi(parame).then(res => {
          this.titleDetails(this.wrongTopicTypeData, this.keyPointsData.knowledgeOrChapterId, this.selectSubjectData.subjectId, this.currentPage)
          this.$vux.toast.text('该错题已移除', 'middle')
        })
      }else {
        this.$vux.toast.text('已取消移除操作', 'middle')
      }
    },
    // 获取题目详情请求封装
    titleDetails (err, knowledge, subjectId, pageNum) {
      let parame = {
        ErrOrIntensive: err,
        KnowledgeOrChapterId: knowledge,
        SubjectId: subjectId,
        StudentId: this.studentId,
        PageSize: 1,
        PageNum: pageNum
      }
      this.subjectKnowledgeApi(parame).then(res => {
        if (res.totalCount == 0) {
          this.$vux.toast.text('该类型已无错题', 'middle')
          this.$router.push('/wrongTopic/wrongTopic')
          return
        }
        this.allPage = res.totalCount
        this.details = res.items[0]
        this.radioValue = []
        this.commonList = []
        for (let i = 0; i < this.details.errAnswerOption.length; i++) {
          this.commonList.push({key: i+1, value: this.optionFiltering(this.details.errAnswerOption[i].option) + '：' + this.details.errAnswerOption[i].desc})
          for (let j = 0; j < this.details.rightOptions.length; j++) {
            if (this.details.errAnswerOption[i].option == this.details.rightOptions[j]) {
              this.radioValue.push(i+1)
            }
          }
        }
        console.log(this.details)
      })
    },
    // 题目选项过滤
    optionFiltering (e) {
      switch(e){
        case 1: return "正确"; break;
        case 2: return "错误"; break;
        case 4: return "A"; break;
        case 8: return "B"; break;
        case 16: return "C"; break;
        case 32: return "D"; break;
        case 64: return "E"; break;
        case 128: return "F"; break;
        case 256: return "G"; break;
        case 512: return "H"; break;
        case 1025: return "I"; break;
        case 2048: return "J"; break;
        case 4096: return "K"; break;
        case 8192: return "L"; break;
        case 16384: return "M"; break;
        case 32768: return "N"; break;
        case true: return 1; break;
        case false: return 2; break;
        case "A": return 4; break;
        case "B": return 8; break;
        case "C": return 16; break;
        case "D": return 32; break;
        case "E": return 64; break;
        case "F": return 128; break;
        case "G": return 256; break;
        case "H": return 512; break;
        case "I": return 1025; break;
        case "J": return 2048; break;
        case "K": return 4096; break;
        case "L": return 8192; break;
        case "M": return 16384; break;
        case "N": return 32768; break;
      }
    }

  }
}
</script>

<style scoped lang="less">
// 左右靠边，上下居中
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
// 左右居中，排序从上到下
.flexIn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// 左右居中，上下居中
.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.topDivCss {
  width: 6.8rem;
  height: 0.88rem;
  background: #FFF;
  padding: 0 .2rem;
  font-size: 0.32rem;
  .flex;
}

.inDivCss {
  background: #FFF;
  margin-top: 0.3rem;
  padding-top: .3rem;
  font-size: 0.32rem;
  display: flex;
  flex-direction: column;
}

.titleDivCss {
  margin-bottom: .3rem;
  font-size: 0.32rem;
}

.titleAnswerCss {
  width: 6.72rem;
  height: 1.14rem;
  margin: 0.5rem 0 0 .05rem;
  border-radius: 0.08rem;
  background: #FFF;
  border: .6px solid #c9c9c9;
  display: flex;
  margin-left: 0.2rem;
}

.answerCss {
  width: 49.4%;
  height: 100%;
  color: #666666;
  font-size: 0.28rem;
  .flexIn;
}

.buttonDivCss {
  width: 7.2rem;
  height: 1.4rem;
  .flexCenter;
}

.buttonCss {
  width: 2.92rem;
  height: 0.72rem;
  font-size: 0.32rem;
  border: 0;
  background: #128fef;
  color: #FFF;
  border-radius: 0.5rem;
}

.buttonCss-2 {
  margin-right: .2rem;
  background: #FFF;
  color: #128fef;
  border: 1px solid #128FEF;
}

.bottomDivCss {
  width: 6.6rem;
  height: .8rem;
  background: #FFF;
  margin-top: 0.3rem;
  padding: 0 .3rem;
  .flex;
}

.bottomImg {
  width: 0.36rem;
  height: 0.36rem;
  margin-right: .1rem;
}

.bottomDivCss-2 {
  color: #666666;
  font-size: 0.28rem;
  display: flex;
}

.analysisDivCss {
  width: 6.8rem;
  height: .7rem;
  font-size: 0.28rem;
  color: #999999;
  margin-bottom: 0.2rem;
  margin-left: 0.2rem;
  .flex;
}

.buttonAnalysisCss {
  // width: 2.5rem;
  height: 0.58rem;
  font-size: 0.28rem;
  border-radius: 0.3rem;
  background: #e3f2fd;
  color: #128fef;
  border: 0;
  padding: 0 0.3rem;
}


</style>
<style>
.spanCss * {
  padding: 0 0.2rem;
  width: 100%;
}
</style>
